<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/util.js"></script>
    <script>
        var productId;
        window.onload = function (){
            productId = getQuery("id");
            init();
        }
        //信息初始化
        async function init(){
            var info = await ajaxGet("/product/findById",{id:productId});
            $("nameSpan").innerHTML = info.name;
            $("priceSpan").innerHTML = info.price;
            $("infoSpan").innerHTML = info.infoNum;
            $("productImg").src = "/html/productImg/"+info.imgPath;

            var str = "";
            for(var i=0;i<info.speakList.length;i++){
                var obj = info.speakList[i];
                str += `<tr><td>${obj.user.name}</td><td>${obj.content}</td></tr>`;
            }
            $("speakData").innerHTML = str;
        }

        async function add(){
            var tk = localStorage.getItem("token");
            var info = null;
            var request = {};
            request.headers["token"]=tk;
            request.params = {productId,content:$("content").value};
                await axios.get("/speak/add",request
                ).then(e =>{
                    info = e.data;
                });


            if(info == "ok"){
                init();
            }
            else{
                alert("添加评论失败");
            }
        }

    </script>
</head>
<body>
    <div style="display: flex;height: 300px;">
        <div style="width: 400px">
            <img src="" id="productImg" width="200" height="260">
        </div>
        <div style="width: 400px;text-align: center">
            <span id="nameSpan"></span><br>
            单价：<span id="priceSpan"></span><br>
            评论数量：<span id="infoSpan"></span><br>
            <a href="/html/index.html">返回首页</a>
        </div>
    </div>

    <table border="1" cellspacing="0" width="60%">
        <thead><tr><th>评论人</th><th>评论内容</th></tr></thead>
        <tbody id="speakData"></tbody>
    </table>

    <div style="margin-top: 30px;">
        请输入评论内容：<input type="text" id="content">
            <input type="button" value="评论" onclick="add()">
    </div>

</body>
</html>